<template>
	<view>
		<view class="page-header" :style="{backgroundImage: info.store_backdrop ? `url(${info.store_backdrop})` : ''}">
			<view class="fu-tabbar" :style="[{ height: CustomBar + 'px' }]">
				<image v-if="info.store_backdrop" :src="info.store_backdrop" mode="widthFix" class="bg-img"></image>
				<view :style="[{ height: StatusBar + 'px' }]"></view>
				<view class="fu-tabbar-con flex justify-start align-center "
					:style="[{ height: CustomBar - StatusBar + 'px' }]">
					<view class="cuIcon-back padding-left-sm text-white text-xl" @click="handleBack"></view>
					<!-- <view class="search-wrap">
					<view class="cu-bar search "  @click="handleSearch">
						<view class="search-form round">
							<text class="cuIcon-search"></text>
							<input  :adjust-position="false" type="text" disabled placeholder="请输入商品名称" confirm-type="search"  />
						</view>
					</view>
				</view> -->
				</view>
			</view>
			<view :style="[{ height: CustomBar + 'px' }]">

			</view>
		</view>
		<!-- 店铺信息 start -->
		<view class="shop-wrap padding-left padding-right flex justify-between align-center">
			<view class="flex bg-white justify-start shop-box">
				<view class="shop-img">
					<fu-image :src="info.store_logo" mode="aspectFill"></fu-image>
				</view>
				<view class="shop-info">
					<view class="flex align-center justify-between" style="overflow: hidden;">
						<view class="shop-name text-bold text-cut flex1 text-333 font-28">{{info.store_name}}</view>
						<view class="shop-btn flex align-center" @click="handleFollow">
							<image src="https://localelife.chunchuangkeji.cn/h5img/images/collect-2.png" class="fu-block-32 margin-right-8" v-if="info.is_collection == 1"></image>
							<image src="https://localelife.chunchuangkeji.cn/h5img/images/collect-1.png" class="fu-block-32 margin-right-8" v-else></image>
							<text class="font-24 text-333 text-bold">{{info.is_collection == 1 ? '已收藏' : '收藏'}}</text>
						</view>
					</view>
					<view class="flex align-center margin-top-16">
						<view class="flex align-center margin-right-104">
							<image src="https://localelife.chunchuangkeji.cn/h5img/images/clock.png" class="fu-block-20 margin-right-16 flex-shrink"></image>
							<text class="text-999 font-22 text-underline">{{info.business_hours}}</text>
						</view>
						<view class="flex align-center flex-shrink">
							<image src="https://localelife.chunchuangkeji.cn/h5img/images/tel.png" class="fu-block-20 margin-right-16 flex-shrink"></image>
							<text class="text-999 font-22" style="white-space: nowrap;">{{info.service_phone}}</text>
						</view>
					</view>
					<view class="flex align-center padding-top-16 text-999 font-22" style="overflow: hidden;" @click.stop="OpenNavigation(info.lat, info.lng, info.company_address)">
						<image src="https://localelife.chunchuangkeji.cn/h5img/images/addr-2.png" class="fu-block-20 margin-right-16 flex-shrink"></image>
						<text class="flex-shrink">{{info.juli}}</text>
						<text style="margin: 0 8rpx;">|</text>
						<text class="text-cut">{{info.company_address}}</text>
					</view>
					<!-- <view class="shop-star flex justify-start align-center">
						<view class="shop-star-bg">
							<fu-star :readonly="false" :value="info.store_star" :size="30"></fu-star>
						</view>
						<view class="text-white text-sm">{{info.store_collection_num}}{{i18n['人关注']}}</view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 店铺信息 end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {


			}
		},
		computed: {
			//店铺信息
			info: {
				get() {
					return this.$store.state.shopInfo
				},
				set() {}
			}
		},
		mounted() {
			const that = this
			let h = uni.createSelectorQuery().select(".page-header");
			h.boundingClientRect(function(data) { //data - 各种参数
				// that.$store.commit('shopHeaderHight',data.height);
				that.$emit('getHeight', data.height)
			}).exec()
			this.info = this.$store.state.shopInfo;
			console.log('店铺信息',this.info)
		},
		methods: {
			/**
			 * @description 返回上一页
			 */
			handleBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			/**
			 * @description 去搜索
			 */
			handleSearch() {
				// console.log('ssssssssssssss',this.$emit)
				this.$emit('searchHomeChange', 'goods');

			},
			/**
			 * @description 店铺收藏与取消收藏
			 */
			handleFollow() {
				this.$api
					.post(global.apiUrls.postUserAddonsSetCollection, {
						collect_id: this.$store.state.partner_id, //店铺id,
						type: 4, //4代表商铺收藏
					})
					.then(res => {
						console.log(res);
						if (res.data.code == 1) {
							// this.info.is_collection = res.data.data.is_collection;
							if (res.data.data.is_collection == 1) {
								this.$message.info(this.i18n['关注成功']);
							} else {
								this.$message.info(this.i18n['取消关注']);
							}
							this.get_shop_info(this.$store.state.partner_id);
							uni.$emit('paySuccess')

							this.$forceUpdate();
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			OpenNavigation(latitude,longitude,address) {
				var that = this;
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					name: address,
					success: function() {
						console.log('success');
					}
				});
			},
			/**
			 * @description 获取店铺信息
			 */
			get_shop_info(partner_id) {
				this.$api
					.post(global.apiUrls.get_shop_info, {
						partner_id: partner_id, //店铺id,
						user_id: (global.userInfo && global.userInfo.id) || 0,
					})
					.then(res => {
						console.log('店铺信息', res);
						if (res.data.code == 1) {
							this.info = res.data.data;
							this.$store.commit('shopInfo', res.data.data);
							uni.$emit('updataShopInfo', {
								num: res.data.data.store_collection_num,
								partner_id: partner_id
							});
							console.log('this.$store.state.shopInfo', this.$store.state.shopInfo)
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-header {
		height: 296rpx;
		background-repeat: no-repeat;
		background-size: 100%;
	}

	// 标题栏 end
	// 搜索 start
	.fu-tabbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99999;
		background: linear-gradient(45deg, #FD9CAE, #FF8F58);
		overflow: hidden;

		.bg-img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.cu-bar .search-form {
			margin: 0;
			background: rgba(255, 255, 255, 0.4);
			color: #FFFFFF;
		}

		.uni-input-placeholder {
			color: #FFFFFF;
		}

		.fu-tabbar-con {
			position: relative;

			.search-wrap {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				// #ifndef MP-WEIXIN
				width: calc(100% - 120rpx);
				// #endif
				// #ifdef MP-WEIXIN
				width: calc(100% - 242rpx);
				// #endif
			}
		}
	}

	// 搜索 end
	// 店铺信息 start
	.shop-wrap {
		// background: linear-gradient(45deg, #f43f3b, #ec008c);
		width: 100%;
		position: relative;
		// padding-top: 40rpx;
		// padding-bottom: 40rpx;
		overflow: hidden;
		margin-top: -116rpx;

		.shop-bg {
			position: absolute;
			left: 0;
			z-index: 9;
			width: 100%;
		}

		.shop-img {
			width: 124rpx;
			height: 124rpx;
			border-radius: 8rpx;
			overflow: hidden;
			margin-right: 16rpx;
			position: relative;
			z-index: 10;
			flex-shrink: 0;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.shop-box {
			width: 100%;
			border-radius: 16rpx;
			padding: 32rpx 24rpx;
			z-index: 9;
		}

		.shop-info {
			position: relative;
			flex: 1;
			z-index: 10;
			overflow: hidden;

			.shop-name {
				// margin-top: 2rpx;
			}

			.shop-star {
				margin-top: 8rpx;

				.shop-star-bg {
					background: rgba(255, 255, 255, 0.21);
					border-radius: 16rpx;
					padding: 0 12rpx;
					margin-right: 12rpx;

				}

			}
		}
	}

	// 店铺信息 end
</style>
